<template>
  <div class="wms-check-order-page art-full-height">
    <ElCard class="art-table-card" shadow="never">
      <!-- 表格工具栏 -->
      <ArtTableHeader
        v-model:columns="columnChecks"
        @refresh="refreshData"
        layout="refresh,size,fullscreen,columns,settings"
      >
        <template #left>
          <ElButton type="primary" @click="handleAdd" v-ripple>
            <ElIcon><Plus /></ElIcon>
            新增盘点单
          </ElButton>
          <ElButton @click="handleExport" v-ripple>
            <ElIcon><Download /></ElIcon>
            导出
          </ElButton>
        </template>
      </ArtTableHeader>

      <!-- 表格 -->
      <ArtTable
        :loading="isLoading"
        :data="tableData"
        :columns="columns"
        :pagination="paginationState"
        @pagination:size-change="onPageSizeChange"
        @pagination:current-change="onCurrentPageChange"
      >
        <!-- 自定义列插槽 -->
        <template #orderInfo="{ row }">
          <div class="order-info">
            <div class="order-no">{{ row.checkOrderNo }}</div>
            <div class="order-type">
              <ElTag type="info">盘点单</ElTag>
            </div>
          </div>
        </template>

        <template #warehouseInfo="{ row }">
          <div class="warehouse-info">
            <div class="warehouse-name">{{ row.warehouseName }}</div>
            <div class="area-name" v-if="row.areaName">{{ row.areaName }}</div>
          </div>
        </template>

        <template #statusInfo="{ row }">
          <ElTag :type="getStatusTagType(row.checkOrderStatus)">
            {{ getStatusName(row.checkOrderStatus) }}
          </ElTag>
        </template>

        <template #differenceInfo="{ row }">
          <div class="difference-info">
            <div class="profit-loss">
              <ElStatistic
                :value="row.profitLossQuantity || 0"
                :precision="3"
                :value-style="{
                  color:
                    (row.profitLossQuantity || 0) >= 0 ? '#67C23A' : '#F56C6C',
                }"
              />
            </div>
            <div class="difference-amount" v-if="row.profitLossAmount">
              <ElText
                size="small"
                :type="(row.profitLossAmount || 0) >= 0 ? 'success' : 'danger'"
              >
                ¥{{ Math.abs(row.profitLossAmount || 0).toFixed(2) }}
              </ElText>
            </div>
          </div>
        </template>

        <template #actions="{ row }">
          <ElButton type="primary" link @click="handleView(row)">
            <ElIcon><View /></ElIcon>
            查看
          </ElButton>
          <ElButton type="warning" link @click="handleEdit(row)">
            <ElIcon><Edit /></ElIcon>
            编辑
          </ElButton>
          <ElButton
            type="success"
            link
            @click="handleCheck(row)"
            v-if="canCheck(row)"
          >
            <ElIcon><Check /></ElIcon>
            盘点
          </ElButton>
          <ElButton type="danger" link @click="handleDelete(row)">
            <ElIcon><Delete /></ElIcon>
            删除
          </ElButton>
        </template>
      </ArtTable>
    </ElCard>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useTable } from "@/composables/useTable";
import { WmsCheckOrderService } from "@/api/wms/orderApi";
import { ElMessage } from "element-plus";
import {
  Plus,
  Download,
  View,
  Edit,
  Check,
  Delete,
} from "@element-plus/icons-vue";

defineOptions({ name: "WmsCheckOrder" });

// 表格配置
const {
  tableData,
  columns,
  columnChecks,
  isLoading,
  paginationState,
  onPageSizeChange,
  onCurrentPageChange,
  refreshData,
} = useTable<WMS.Order.CheckOrderInfo>({
  core: {
    apiFn: WmsCheckOrderService.getCheckOrderList,
    apiParams: {
      current: 1,
      size: 20,
    },
    columnsFactory: () => [
      {
        prop: "orderInfo",
        label: "单据信息",
        slot: "orderInfo",
        minWidth: 180,
        fixed: "left",
      },
      {
        prop: "warehouseInfo",
        label: "仓库/库区",
        slot: "warehouseInfo",
        minWidth: 150,
      },
      {
        prop: "statusInfo",
        label: "状态",
        slot: "statusInfo",
        width: 100,
        align: "center",
      },
      {
        prop: "differenceInfo",
        label: "盈亏数量",
        slot: "differenceInfo",
        width: 120,
        align: "center",
      },
      {
        prop: "checkTime",
        label: "盘点时间",
        width: 180,
        formatter: (row) => row.checkTime || "-",
      },
      {
        prop: "createTime",
        label: "创建时间",
        width: 180,
        formatter: (row) => row.createTime || "-",
      },
      {
        prop: "actions",
        label: "操作",
        width: 200,
        slot: "actions",
        fixed: "right",
      },
    ],
  },
});

// 新增
const handleAdd = () => {
  ElMessage.info("新增盘点单功能开发中...");
};

// 查看
const handleView = (row: WMS.Order.CheckOrderInfo) => {
  ElMessage.info("查看盘点单功能开发中...");
};

// 编辑
const handleEdit = (row: WMS.Order.CheckOrderInfo) => {
  ElMessage.info("编辑盘点单功能开发中...");
};

// 盘点
const handleCheck = (row: WMS.Order.CheckOrderInfo) => {
  ElMessage.info("盘点功能开发中...");
};

// 删除
const handleDelete = (row: WMS.Order.CheckOrderInfo) => {
  ElMessage.info("删除盘点单功能开发中...");
};

// 导出
const handleExport = () => {
  ElMessage.info("导出盘点单功能开发中...");
};

// 工具方法
const getStatusTagType = (status: number) => {
  const statusMap: Record<number, string> = {
    1: "info",
    2: "warning",
    3: "success",
    4: "danger",
  };
  return statusMap[status] || "info";
};

const getStatusName = (status: number) => {
  const statusMap: Record<number, string> = {
    1: "待盘点",
    2: "盘点中",
    3: "已完成",
    4: "已取消",
  };
  return statusMap[status] || "未知";
};

const canCheck = (row: WMS.Order.CheckOrderInfo) => {
  return row.checkOrderStatus === 1 || row.checkOrderStatus === 2; // 待盘点或盘点中可以盘点
};
</script>

<style lang="scss" scoped>
.wms-check-order-page {
  .order-info {
    .order-no {
      font-weight: 500;
      color: var(--el-text-color-primary);
      margin-bottom: 4px;
    }

    .order-type {
      margin-top: 4px;
    }
  }

  .warehouse-info {
    .warehouse-name {
      font-weight: 500;
      color: var(--el-text-color-primary);
      margin-bottom: 4px;
    }

    .area-name {
      font-size: 12px;
      color: var(--el-text-color-regular);
    }
  }

  .difference-info {
    .profit-loss {
      margin-bottom: 4px;
    }

    .difference-amount {
      text-align: center;
    }
  }
}
</style>
